<template>
  <div class="test-auth">
    <h1>认证测试页面</h1>
    <div class="auth-info">
      <h2>当前认证状态</h2>
      <p><strong>isLogin:</strong> {{ userStore.isLogin }}</p>
      <p><strong>hasToken:</strong> {{ !!userStore.token }}</p>
      <p><strong>token:</strong> {{ userStore.token || '无' }}</p>
      <p><strong>username:</strong> {{ userStore.username || '无' }}</p>
      <p><strong>localStorage token:</strong> {{ localStorageToken }}</p>
    </div>
    
    <div class="actions">
      <button @click="clearToken">清除Token</button>
      <button @click="setTestToken">设置测试Token</button>
      <button @click="goToHome">访问主页</button>
      <button @click="goToUsersMgmt">访问用户管理</button>
    </div>
    
    <div class="debug-info">
      <h3>调试信息</h3>
      <pre>{{ debugInfo }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();
const debugInfo = ref('');
const localStorageToken = ref('');

onMounted(() => {
  localStorageToken.value = localStorage.getItem('token') || '无';
  debugInfo.value = `页面加载时间: ${new Date().toISOString()}\n`;
  debugInfo.value += `路由路径: ${router.currentRoute.value.path}\n`;
  debugInfo.value += `用户Store状态: ${JSON.stringify({
    isLogin: userStore.isLogin,
    hasToken: !!userStore.token,
    tokenLength: userStore.token?.length || 0
  }, null, 2)}`;
});

function clearToken() {
  userStore.logout();
  localStorageToken.value = localStorage.getItem('token') || '无';
  debugInfo.value += `\n[${new Date().toISOString()}] Token已清除`;
}

function setTestToken() {
  userStore.setToken('test-token-123');
  localStorageToken.value = localStorage.getItem('token') || '无';
  debugInfo.value += `\n[${new Date().toISOString()}] 测试Token已设置`;
}

function goToHome() {
  router.push('/');
}

function goToUsersMgmt() {
  router.push('/users-mgmt');
}
</script>

<style scoped>
.test-auth {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.auth-info {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
}

.actions {
  margin: 20px 0;
}

.actions button {
  margin-right: 10px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.actions button:hover {
  background: #0056b3;
}

.debug-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
}

.debug-info pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style> 